<script lang="ts" setup>
import MyIcon from "@/components/MyIcon.vue";
import avatarImg from '@/assets/img/avatar.png'
import {onMounted} from "vue";
import bingWallpaper, {bingImgUrl} from "@/apis/bingWallpaper";
import { blobToDataURI} from "@/utils/common";
import  { VsLoadingFn } from "vuesax-alpha";
import backImg from "@/icons/svg/waves.svg";
import {RouterView} from "vue-router";
const active = ref('home')
const activeSidebar = ref(true)
const topBackImg = ref('')
const nowRenderComp = ref()

function getRandomImg(){
  // const loadingInstance = VsLoadingFn()
  // bingWallpaper.getRandomWallpaper().then(res=> {
  //   // console.log(blobToBase64(res.data as Blob,'image/png'))
  //   blobToDataURI(res.data as unknown as Blob,(url:string)=> {
  //     topBackImg.value = url || backImg
  //   });
  // }).finally(()=> {
  //   loadingInstance.close()
  // })
  topBackImg.value = bingImgUrl
}
onMounted(()=> {
  getRandomImg()
  nextTick(()=> {
    console.log(nowRenderComp.value)
  })
})
function goLink(url:string) {
  window.open(url,'_blank')
}
</script>
<template>
  <div class="layout-container">
    <vs-navbar v-model="active"
               hide-scroll
               target-scroll="#homeContainer"
               center-collapsed
               class="my-navbar"
    >
      <template #left>
        <vs-button type="flat" icon @click="activeSidebar = !activeSidebar">
            <my-icon name="Menu"></my-icon>
        </vs-button>
      </template>
      <vs-navbar-item id="home" :active="active == 'guide'">
        小窝
      </vs-navbar-item>
      <vs-navbar-item id="apps" :active="active == 'apps'">
        应用中心
      </vs-navbar-item>
      <vs-navbar-item id="music" :active="active == 'music'">
        音乐圈
      </vs-navbar-item>
      <vs-navbar-item id="contact" :active="active == 'contact'">
        友情链接
      </vs-navbar-item>
      <template #right>
        <vs-tooltip>
          <vs-button shape="circle" size="default" type="border" animation-type="rotate">
            <i class='bx bxs-coffee'></i>
            <template #animate>
              <i class='bx bxs-coffee'></i>
            </template>
          </vs-button>
          <template #content> 如果帮到了你，请我喝杯咖啡！ </template>

        </vs-tooltip>

      </template>
    </vs-navbar>
    <vs-sidebar v-model="active"  v-model:open="activeSidebar" class="my-sidebar" absolute reduce hover-expand>
      <template #logo>

      </template>
      <template #header />
      <vs-sidebar-item id="home" :active="active==='home'">
        <template #icon>
          <my-icon name="Home"></my-icon>
        </template>
        小窝
      </vs-sidebar-item>
      <vs-sidebar-item id="apps"  :active="active==='apps'">
        <template #icon>
          <my-icon name="GridBold"></my-icon>
        </template>
        应用中心
      </vs-sidebar-item>
      <vs-sidebar-item id="music"  :active="active==='music'">
        <template #icon>
          <my-icon name="MusicFilter"></my-icon>
        </template>
        音乐圈
      </vs-sidebar-item>
      <vs-sidebar-item id="contact"  :active="active==='contact'">
        <template #icon>
          <my-icon name="Send2Bold"></my-icon>
        </template>
        友情链接
      </vs-sidebar-item>
      <template #footer>
        <vs-row justify="space-between" style="flex-wrap: wrap">
          <vs-avatar shape="circle">
            <img :src="avatarImg" alt=""  />
            <template #icons>
              <i class="bx bxl-github links" />
            </template>
          </vs-avatar>
        </vs-row>
      </template>
    </vs-sidebar>
    <!--    主要内容区域-->
    <div  class="home-container" id="homeContainer">
<!--     顶部壁纸-->
      <div class="top-image">
        <transition name="fade">
          <img class="top-image_inner" v-if="topBackImg" :src="topBackImg" alt="顶部图片"/>
        </transition>
        <div class="weather-container">
          <v-mini-weather></v-mini-weather>
        </div>
      </div>
      <div class="home-main-container" >
        <div class="home-app-main">
          <router-view v-slot="{ Component }">
            <transition name="slideSwitch">
              <keep-alive>
                  <component ref="nowRenderComp" :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
        <div class="home-main-background">
          <img :src="backImg"/>
        </div>
      </div>
      <footer class="home-footer-container">
        <div class="footer-background">
          <img :src="topBackImg" alt=""/>
        </div>
        <div class="links-container">
          <div class="other-links">
            <span>工具：</span>
            <vs-tooltip placement="top">
              <vs-button size="small" type="flat" @click="goLink('https://www.vuesax.space/')"> vuesax-alpha </vs-button>
              <template #content> 一个好看的vue3组件库！ </template>
            </vs-tooltip>
            <vs-tooltip placement="top">
              <vs-button size="small" type="flat" @click="goLink('https://animate.style/')"> animate.css </vs-button>
              <template #content> 一个css3动画库 </template>
            </vs-tooltip>
          </div>
          <div class="auth-links">
            <div><img src="../assets/img/wind.png" class="animate__infinite rotateIn wind" alt=""/>
            <span class="my-auth">powered By Exchar</span>
            </div>
          </div>
          <div class="footer-links">
            <a class="my-link" href="https://beian.miit.gov.cn/" target="_blank">@2024 蜀ICP备2023023736号-1</a>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<style scoped lang="scss">
:root{

}
.home-container{
  //padding-top: 64px;
  height: 100vh;
  //overflow-x: hidden;
  overflow-y: auto;
  //display: flex;
  //flex-direction: column;
}
.home-main-container{
  //height: 150vh;
  width: 80vw;
  margin: 1rem auto 0;
  min-height: 52vh;
  height: fit-content;
  //overflow: hidden;
  position: relative;
  .home-app-main{
    height: fit-content;
    //overflow: hidden;

    &>div{
      //position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: fit-content;
      margin-bottom: 300px;
    }
  }
}
.top-image{
  height: 30vh;
  width: 100%;
  box-shadow: var(--vs-box-shadow-dark);
  position: relative;
  .top-image_inner{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;

  }
}
.layout-container{
  padding: 0 !important;
  position: relative;
}
.links{
  color: #7a7a7a;
}
.my-navbar{
  --vs-navbar-background: rgba(255,255,255, 0.6);
  ::v-deep(.vs-navbar__center){
    z-index: 1;
  }
  &::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    backdrop-filter: blur(6px);
    z-index: 0;
    bottom: 0;
  }
}
.vs-avatar__icons{
  background-color: transparent;
}
.my-sidebar{
  //background: rgba(255,255,255,.6);
}
.home-main-background{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.home-footer-container{
  --vs-navbar-background: rgba(255, 255, 255, 0.6);
  position: fixed;
  bottom: 0;
  font-family: MiSans-Medium, JetBrains Mono Medium, serif !important;
  color: rgba(var(--vs-text-color));
  margin-top: 4vh;
  min-height: 5vh;
  height: auto;
  width: 100%;
  z-index: 100;
  padding: 12px 0;
  max-height: 200px;
  overflow: hidden;
  //z-index: 999;
  background-color: var(--vs-navbar-background);
  box-shadow: var(--vs-box-shadow-dark);
  border-radius: 2px;
  .footer-background{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    img{
      object-fit: cover;
      transform: translateY(-60%);
      width: 100%;
      position: relative;
      z-index: -1;
    }
  }
  .links-container{
    position: relative;
    z-index: 1;
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span,a{
      filter: invert(1);
    }
    &>div{
      :not(:last-of-type){
        margin-bottom: 0.5vh;
      }
    }
    .other-links{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .auth-links{
      &>div{
        display: flex;
        align-items: center;
        &>img{
          margin-right: 2vw;
        }
      }
    }
    .my-auth{
      background-image:-webkit-linear-gradient(top, #bc2f08,#d75d10,#de6912);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      &:hover{
        animation: rubberBand 1.2s 1 linear;
      }
    }
    .wind{
      height: 3vh;
      animation: rotate 2s linear infinite;
      &:hover{
        animation-duration: 1s;
      }
    }
  }
  &::after{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
  }

}
//@keyframes rotate {
//
//}
.my-link{
  &:hover{
    color: rgb(var(--vs-primary));
    text-decoration: underline;
  }
}
.animate__animated.animate__infinite {
  --animate-duration: 1.2s;
  --animate-delay: 2s;
}
.weather-container{
  position: absolute;
  right: 60px;
  top: 60px;
  min-height: 200px;
  height: 40%;
  width: 300px;
  z-index: 10;
}
.slideSwitch-enter-active{
  animation: fadeOut 1s;
}
.slideSwitch-leave-active {
  animation: bounceOutLeft 0.6s;
}
//.slideSwitch-enter-active, .slideSwitch-leave-active {
//  transition: opacity .3s ease;
//}
//.slideSwitch-enter, .slideSwitch-leave-to {
//  opacity: 0;
//  transform: translate3d(0, 0, 0);
//}
.home-main-container{

}
</style>
